<template>
  <div>
    <div :class="{ item1: true }"></div>
    <div :class="{ item1: haveClass }"></div>

    <div :class="['item1']"></div>
    <div :class="['item' + classNum]"></div>

    <div :class="[{ item1: true }]"></div>
    <my-button type="sucess"></my-button>

    <div
      :style="{
        height: '100px',
        width: '100px',
        background: 'red',
        margin: '5px',
      }"
    ></div>

    <div :style="[myStyle]"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      haveClass: true,
      classNum: 1,
    };
  },
  methods: {},
};
</script>
<style scoped>
.item1 {
  height: 100px;
  width: 100px;
  background: red;
  margin: 5px;
}
/* .scuess {
	default:#409eff;
	danger: #f56c6c;
	success: #67c23a;
	warning: #e6a23c;
	info: #909399;
} */
</style>